<template>
  <div class="special-effect">
    <el-tabs class="panel-tabs-old" type="border-card" v-model="tab">
      <el-tab-pane label="样式" name="attribute">
        <LayerAttribute :key="sceneStore.selLayer ? sceneStore.selLayer.layerName : 'null'" />
      </el-tab-pane>
      <el-tab-pane
        v-if="sceneStore.selLayer?.type === 'gltfmodel'"
        label="高级属性"
        name="advancedAttribute"
      >
        <AdvancedAttribute
          :key="sceneStore.selLayer ? sceneStore.selLayer.layerName : 'null'"
        ></AdvancedAttribute>
      </el-tab-pane>
      <el-tab-pane label="数据" name="data">
        <LayerDataSetting v-if="dataVisible" />
      </el-tab-pane>
      <el-tab-pane label="交互" name="setting">
        <LayerInteraction v-if="settingVisible" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import LayerAttribute from './content/index.vue';
import AdvancedAttribute from './advanced-attribute/index.vue';
import LayerInteraction from './content/panel/interaction.vue';
import LayerDataSetting from './content/panel/data-setting.vue';

defineOptions({
  name: 'Attribute',
});

const tab = ref('attribute');
const sceneStore = useSceneStore();

const settingVisible = computed(() => {
  if (!sceneStore.selLayer) return false;
  return sceneStore.selLayer.type === 'gltfmodel' && !sceneStore.selLayer.actualType;
});

const dataVisible = computed(() => {
  if (!sceneStore.selLayer) return false;
  return (
    ['div'].includes(sceneStore.selLayer.type) ||
    (sceneStore.selLayer.type === 'gltfmodel' && !sceneStore.selLayer.actualType)
  );
});

watch(
  () => sceneStore.selLayer?.code,
  () => {
    tab.value = 'attribute';
  }
);
</script>

<style lang="less" scoped>
.special-effect {
  display: flex;
  height: 100%;
  overflow-y: auto;

  :deep(.el-loading-mask) {
    background-color: transparent;
    .circular {
      width: 24px;
    }
  }

  :deep(.el-input__wrapper) {
    background: rgba(36, 44, 52, 0.3);
    border: 1px solid rgba(69, 72, 81, 0.6);
    border-radius: 4px;
    box-shadow: none;
    .el-input__inner {
      color: #fff;
    }
    .el-input__suffix {
      position: absolute;
      right: 14px;
      pointer-events: auto;
      cursor: pointer;
    }
  }
}
</style>
